<template>
  <el-menu
    mode="horizontal"
    background-color="#545c64"
    text-color="#ffd04b"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="1">商品管理系统</el-menu-item>
    <el-button type="warning" @click="logout" round class="logout"
      >退出登录</el-button
    >
  </el-menu>
</template>

<script>
import { deleteUser } from "../utils";
//
export default {
  name: "Header",
  data() {
    return {};
  },
  methods: {
    // 退出登录
    logout() {
      this.$confirm("确认退出吗", "退出登录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser();
          this.$router.history.replace("/login");
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.el-header {
  padding: 0px 0px;
}
.logout {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>